import Vue from 'vue'

var globalVar = '111'

new Vue({
  el: '#root',
  // 在模板里面能访问的，都必须是 this 里面能访问到的，
  // 全局的访问不到
  // template: `
  //   <!--<div v-bind:id="aaa" v-on:click="handleClick"> 下面的是简写-->
  //   <div :id="aaa" @click="handleClick">
  //     {{isActive ? 'active': 'not active'}}
  //     {{arr.join(' ')}}
  //     {{Date.now()}}
  //     <p v-html="hello"></p>
  //   </div>
  // `,

  //注意：在属性没有定义过过的时候，去改他的值 vue不会刷新dom


  template: `
    <!--<div :class='{active: isActive}'>-->                        <!--方法1-->
    <!--<div :class="[isActive ? 'active' : '']">-->                <!--方法2-->
    <div :class="[{active: isActive}]" :style="styles">     <!--方法3-->
    <!--<div :class="[{active: isActive}]" :style="[styles, styles2]">-->  <!--方法4-->
      <p v-html="hello"></p>
      <p>{{getJoinedArr(arr)}}</p>
    </div>
  `,

  data: {
    isActive: true,
    arr: [1, 2, 3, 4, 5, 6, 7],
    //vue 默认会转义字符串，html需要转义 <p v-html="hello"></p>
    hello: '<span>123</span>',
    aaa: 'aabbcc',
    styles: {
      color: 'red',
      // 浏览器一般都有默认样式表，这个是消除浏览器默认的样式
      appearance: 'none'
    },
    //相同的属性 后面覆盖前面的
    // styles2: {
    //   color: 'black'
    // }
  },

  methods: {
    handleClick(){
      alert('clicked')
    },
    getJoinedArr(arr){
      return arr.join(' ')
    }
  },

  // 之后变化的时候才回去计算
  // computed: {
  //   className(){
  //
  //   }
  // }
})
